import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function Index() {
  useEffect(() => {
    console.log("妹妹你来到了Index界面");
    return ()=>{
        console.log("妹妹，你离开了Index界面");
    }
  },[]);
  return <h2>JSPang.com</h2>;
}

function List() {
  useEffect(() => {
    console.log("妹妹你来到了List界面");
    return () => {
      console.log("妹妹，你离开了List界面");
    };
  }, []);
  return <h2>List-Page</h2>;
}
const Example2 = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(`useEffect=>You clicked ${count} times`);
    return () => {
      console.log("====================");
    };
  }, [count])
  return (
    <div>
      <p>You clicked {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        click me
      </button>

      <Router>
        <ul>
          <li>
            {" "}
            <Link to="/">首页</Link>{" "}
          </li>
          <li>
            <Link to="/list/">列表</Link>{" "}
          </li>
        </ul>
        <Route path="/" exact component={Index} />
        <Route path="/list/" component={List} />
      </Router>
    </div>
  );
};
export default Example2;
//useEffect使用方法：
// 第一种
// 这里相当于vue的create
// useEffect(() => {
//     console.log(`useEffect=>You clicked ${count} times`);
//   })

// 第二种
// 这里相当于vue的组件销毁时
// useEffect(() => {
//     return () => {
//       console.log("====================");
//     };
//   })
// 第三种
// 但是前两种情况页面重新渲染的时候也会重新渲染，所以需要解绑
// useEffect(() => {
//     console.log("妹妹你来到了List界面");
//     return () => {
//       console.log("妹妹，你离开了List界面");
//     };
//   }, []);
// 第四种
// 这时候解绑了以后不会造成渲染别的也会带过来 
// useEffect(()=>{
//     console.log(`useEffect=>You clicked ${count} times`)

//     return ()=>{
//         console.log('====================')
//     }
// },[count])